<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import homeApi from '@/service/api/home'
import WorksList from '@/views/user/components/WorksList.vue'

const userContainer = ref<HTMLDivElement | null>(null)
const { arrivedState } = useScroll(userContainer)
let isDragging = false
let startX = 0
let scrollLeft = 0
const userList = ref([])
const getUser = async () => {
  const { data } = await homeApi.user()
  userList.value = data
}
getUser()

const wordksRef = ref()
const handWordks = (row: any) => {
  wordksRef.value.open(row)
}

const handScroll = (type: 'left' | 'right') => {
  if (!userContainer.value) return
  const scrollAmount = userContainer.value.clientWidth
  userContainer.value.classList.add('scroll-transition')
  if (type === 'left') {
    userContainer.value.scrollLeft -= scrollAmount
  } else if (type === 'right') {
    userContainer.value.scrollLeft += scrollAmount
  }
  setTimeout(() => {
    userContainer.value?.classList.remove('scroll-transition')
  }, 500) // Match the duration of the CSS transition
}

const onMouseDown = (e: MouseEvent) => {
  isDragging = true
  startX = e.pageX - (userContainer.value?.offsetLeft || 0)
  scrollLeft = userContainer.value?.scrollLeft || 0
}

const onMouseMove = (e: MouseEvent) => {
  if (!isDragging) return
  e.preventDefault()
  const x = e.pageX - (userContainer.value?.offsetLeft || 0)
  const walk = (x - startX) * 2 // scroll-fast
  if (userContainer.value) {
    userContainer.value.scrollLeft = scrollLeft - walk
  }
}

const onMouseUp = () => {
  isDragging = false
}

onMounted(() => {
  if (userContainer.value) {
    userContainer.value.addEventListener('mousedown', onMouseDown)
    userContainer.value.addEventListener('mousemove', onMouseMove)
    userContainer.value.addEventListener('mouseup', onMouseUp)
    userContainer.value.addEventListener('mouseleave', onMouseUp)
  }
})

onBeforeUnmount(() => {
  if (userContainer.value) {
    userContainer.value.removeEventListener('mousedown', onMouseDown)
    userContainer.value.removeEventListener('mousemove', onMouseMove)
    userContainer.value.removeEventListener('mouseup', onMouseUp)
    userContainer.value.removeEventListener('mouseleave', onMouseUp)
  }
})

let lsClose: boolean = false
const handClose = () => {
  lsClose = true
}
onActivated(() => {
  if (lsClose) {
    wordksRef.value.show()
  }
})
</script>

<template>
  <div class="diy-nav" id="user-page">
    <div class="append">
      <img loading="lazy" src="@/assets/hor.png" alt="热门角色" />
      <div class="name">热门角色</div>
    </div>

    <n-button class="btn" strong secondary>
      <span>查看全部</span>
      <i class="esayIcon esayIcon-gengduo"></i>
    </n-button>
  </div>
  <div class="user-w">
    <div class="user" ref="userContainer">
      <div
        class="card hover-shadow"
        v-for="item in userList"
        :key="item.id"
        @click="handWordks(item)"
      >
        <img :src="item.avatar" alt="角色" />
        <div class="bottom">
          <div class="info">
            <div class="name u-line-1">{{ item.username }}</div>
            <div class="desc">机构「{{ item.institution_name }}」</div>
          </div>
        </div>
      </div>
    </div>
    <div class="pre-btn" v-if="!arrivedState.left" @click="handScroll('left')">
      <i class="esayIcon esayIcon-gengduo"></i>
    </div>
    <div
      class="next-btn"
      v-if="!arrivedState.right"
      @click="handScroll('right')"
    >
      <i class="esayIcon esayIcon-gengduo"></i>
    </div>
  </div>
  <works-list to="#home-page" ref="wordksRef" @ls-close="handClose" />
</template>

<style scoped lang="scss">
.diy-nav {
  margin: 40px 20px 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .append {
    display: flex;
    align-items: center;
    img {
      width: 22px;
      height: 22px;
      margin-right: 5px;
    }
    .name {
      font-size: 20px;
      font-weight: bold;
      color: #333;
    }
  }

  .esayIcon-gengduo {
    margin-left: 3px;
    font-size: 12px;
  }
}
.user-w {
  position: relative;

  .pre-btn,
  .next-btn {
    position: absolute;
    top: calc(50% - 20px);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    background: #ffffff;
    border: 1px solid #f1f2f3;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, -webkit-transform 0.2s;
    i {
      font-size: 14px;
      font-weight: bold;
    }
    &:hover {
      transform: scale(1.2);
    }
  }
  .pre-btn {
    left: 0;
    i {
      transform: rotate(180deg);
    }
  }
  .next-btn {
    right: 0;
  }
}
.user {
  display: flex;
  overflow-x: scroll;
  margin: 14px 20px 0 20px;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* 标准语法 */
  scrollbar-width: none; /* Firefox */
  gap: 0 10px;
  .card {
    min-width: 200px;
    cursor: pointer;
    background-color: #f2f2f2;
    border-radius: 5px;
    overflow: hidden;
    img {
      width: 100%;
      height: 120px;
      object-fit: cover;
      -webkit-user-drag: none;
      display: block;
      border-radius: 5px;
    }
    .bottom {
      padding: 10px;
      .info {
        .name {
          font-size: 16px;
        }
        .desc {
          color: #9499a0;
          font-size: 14px;
        }
      }
    }
    &:nth-child(1) {
      background-color: #fdebea;
    }
    &:nth-child(2) {
      background-color: #f2eefd;
    }
    &:nth-child(3) {
      background-color: #feeee6;
    }
    &:nth-child(4) {
      background-color: #eef6e5;
    }
    &:nth-child(5) {
      background-color: #eeeefd;
    }
  }
}

.scroll-transition {
  scroll-behavior: smooth; /* Smooth scrolling */
  transition: scroll-left 0.5s; /* Scroll transition */
}

@media (max-width: 800px) {
  .diy-nav {
    margin: 20px 12px 0 12px;
    .append {
      img {
        width: 18px;
        height: 18px;
      }
      .name {
        font-size: 16px;
      }
    }
    .btn {
      font-size: 12px;
      height: 30px;
      padding: 4px 10px;
      border-radius: 5px;
    }
    .esayIcon-gengduo {
      margin-left: 1.5px;
      font-size: 10px;
    }
  }
  .user-w {
    .pre-btn,
    .next-btn {
      width: 25px;
      height: 25px;
      i {
        font-size: 10px;
      }
    }
  }
  .user {
    margin: 7px 10px 0 10px;
    gap: 0 5px;
    .card {
      min-width: 150px;
      img {
        height: 80px;
      }
      .bottom {
        padding: 5px;
        .info {
          .name {
            font-size: 12px;
          }
          .desc {
            font-size: 10px;
          }
        }
      }
    }
  }
}
</style>
